<template>
  <view style="width: 100vw;height: 100vh;">
    <H5Navbar title="新增跟进计划"></H5Navbar>
    <view style="padding: 80rpx 20rpx 0 20rpx;width: 100%;height: 100%;box-sizing: border-box">
      <view style="margin-bottom: 30rpx">
        <view class="label-form required-label">客户状态</view>
        <view class="content-select" @click="openProjectName" style="font-size: 30rpx;padding: 0 18rpx 20rpx 18rpx;box-sizing: border-box">
          <text v-if="formType.customerStatus" style="color:rgb(48, 49, 51)">{{formType.customerStatus}}</text>
          <text v-else style="color:rgb(192, 196, 204)">请选择客户状态</text>
        </view>
      </view>

      <view style="margin-bottom: 30rpx">
        <view class="label-form required-label">跟进时间</view>
        <view class="content-select" @click="openDate" style="font-size: 30rpx;padding: 0 18rpx 20rpx 18rpx;box-sizing: border-box">
          <text v-if="formType.followDate" style="color:rgb(48, 49, 51)">{{formType.followDate}}</text>
          <text v-else style="color:rgb(192, 196, 204)">请选择跟进时间</text>
        </view>
      </view>

      <view style="margin-bottom: 30rpx">
        <view class="label-form required-label">跟进事项</view>
        <u--textarea v-model="formType.followInfo" placeholder="请输入跟进事项" border="bottom" autoHeight></u--textarea>
      </view>

      <view style="height: 120rpx;width: 100%;padding: 0 20rpx;box-sizing: border-box;background: #fff;"
           >
        <button type="primary" style="width:100%;height: 80rpx;line-height: 80rpx;border-radius: 40rpx;font-size: 24rpx" @click="submitSave">保存并提交</button>
      </view>


    </view>

    <u-picker :show="showCustomerType" :columns="customerColumns" keyName="dictValue" cancelColor="#fb271b"
              cancelText="清除" :closeOnClickOverlay="true" @close="showCustomerType = false"
              @cancel="closeMainBusiness" @confirm="confirmMainBusiness"></u-picker>

    <u-datetime-picker
        :show="showDate"
        v-model="followDate"
        mode="date"
        :closeOnClickOverlay="true"
        @close="showDate = false"
        @cancel="closeNewDealDate"
        cancelColor="#fb271b"
        cancelText="清除"
        ref="picker"
        @confirm="confirmNewDealDate"
    ></u-datetime-picker>
  </view>
</template>

<script>
import H5Navbar from "../../components/H5Navbar/index";
import {formatDate} from "../../utils";
import {addFollow} from '../../api/work/userManage'
export default {
  name: "addFollow",
  components:{
    H5Navbar
  },
  data(){
    return {
      followDate:'',
      customerId:'',
      showDate:false,
      showCustomerType:false,
      customerDefaultIndex:0,
      customerColumns:[[{dictValue:'跟进中',label:'跟进中'},{dictValue:'已成交',label:'已成交'},{dictValue:'流失客户',label:'流失客户'}]],
      formType:{
        customerStatus:'',
        followDate:'',
        followInfo:'',
      }
    }
  },
  onLoad(options){
    if(options.customerId){
      this.customerId = options.customerId
    }
  },
  methods:{
    openProjectName(){
      this.showCustomerType = true
    },
    confirmMainBusiness(value){
      this.customerDefaultIndex = value.indexs[0]
      this.formType.customerStatus = value.value[0].dictValue
      this.showCustomerType = false
    },
    closeMainBusiness(){
      this.customerDefaultIndex = 0
      this.formType.customerStatus = ''
      this.showCustomerType = false
    },

    openDate(){
      this.showDate = true
      if(this.formType.followDate){
        this.$refs.picker.innerValue=new Date(this.formType.followDate).getTime()
      }
      else{
        this.$refs.picker.innerValue=new Date().getTime()
      }
    },
    closeNewDealDate(){
      this.formType.followDate = ''
      this.followDate = ''
      this.showDate = false
    },
    confirmNewDealDate(options){
      this.formType.followDate = formatDate('yearMonthSet',new Date(options.value),'-')
      this.followDate = Number(new Date(options.value))
      this.showDate = false
    },

    submitSave(){
      if(!this.formType.customerStatus) return this.$tipInfo('请选择客户状态')
      else if(!this.formType.followDate) return this.$tipInfo('请选择跟进时间')
      else if(!this.formType.followInfo) return this.$tipInfo('请填写跟进事项')
      addFollow({
        ...this.formType,
        customerId:this.customerId
      }).then(res => {
        if(res.code == 200){
          this.$tipInfo('新建成功',()=>{
            uni.redirectTo({
              url:'/pageA/follow/activities?customerId='+this.customerId,
              animationType: 'pop-in',
            })
          })
        }
        else{
          this.$tipInfo(res.msg || '系统错误，请稍后再试！')
        }
      })
    }
  }
}
</script>


<style scoped lang="scss">
.label-form{
  font-weight: 400;
  font-size: 28rpx;
  color: #222222;
  text-align: left;
  margin-bottom: 10rpx;
}

.content-select{
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #dadbde ;
}

.required-label{
  &::before{
    content: '*';
    color: red;
    position: relative;
    top: -4rpx;
    left: -4rpx;
  }
}

.black-active{
  width: 100%;
  border-radius: 20rpx;
  background: #fff;
  box-shadow: 0 3rpx 30rpx 0 #D5D0D07F;
  margin-bottom: 26rpx
}
</style>
